<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth" :mask-closable="false" :closable="false">
            <div v-show="modalType === 'edit' || modalType === 'add'">
                <Form ref="formItem" :rules="ruleValidate" label-position="right" :model="formItem" :label-width="130">
                    <Row>
                        <Col span="12">
                            <FormItem label="专家姓名：" prop="experts_name">
                                <Input type="text" v-model="formItem.experts_name" placeholder="请输入专家姓名"
                                       clearable></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="咨询时间：" prop="experts_education">
                                <Input type="text" v-model="formItem.experts_education" placeholder="请输入咨询时间"
                                       clearable></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem label="电话号码：" prop="experts_telephone_number">
                                <Input type="text" v-model="formItem.experts_telephone_number" placeholder="请输入电话号码"
                                       clearable></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="执业方向：" prop="experts_career_orientation">
                                <Input type="text" v-model="formItem.experts_career_orientation" placeholder="请输入执业方向"
                                       clearable></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <FormItem label="工作说明：" prop="experts_work_experience">
                        <Input type="text" v-model="formItem.experts_work_experience" placeholder="请输入工作说明"
                               clearable></Input>
                    </FormItem>
                    <FormItem label="座右铭：" prop="experts_Motto">
                        <Input type="text" v-model="formItem.experts_Motto" placeholder="请输入座右铭" clearable></Input>
                    </FormItem>
                    <FormItem label="开办单位：" prop="company_name">
                        <Input type="text" v-model="formItem.company_name" placeholder="请输入开办单位" clearable></Input>
                    </FormItem>
                </Form>
            </div>
            <div v-show="modalType === 'info'">
                <Form label-position="right" :model="formItem" :label-width="150">
                    <Row>
                        <Col span="12">
                            <FormItem label="专家姓名：">
                                {{formItem.experts_name}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="咨询时间：">
                                {{formItem.experts_education}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem label="电话号码：">
                                {{formItem.experts_telephone_number}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="执业方向：">
                                {{formItem.experts_career_orientation}}
                            </FormItem>
                        </Col>
                        <FormItem label="工作说明：">
                            {{formItem.experts_work_experience}}
                        </FormItem>
                        <FormItem label="座右铭：">
                            {{formItem.experts_Motto}}
                        </FormItem>
                        <FormItem label="开办单位：">
                            {{formItem.company_name}}
                        </FormItem>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <template v-if="modalType === 'edit' || modalType === 'add'">
                    <Button type="text" @click="cancelOption">取消</Button>
                    <Button type="success" @click="saveOption" :loading="btnLoading">保存</Button>
                </template>
                <template v-if="modalType === 'info'">
                    <Button type="text" @click="cancelOption">关闭</Button>
                </template>
            </div>
        </Modal>
    </div>
</template>

<script>
import { saveRevise } from '@/api/customer-service'

export default {
  name: 'optionModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalType: {
      type: String,
      default: () => {
        return 'info'
      }
    },
    modalShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 800
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      ruleValidate: {
        experts_name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ]
      },
      btnLoading: false,
      formItem: {
        content: ''
      },
      categoryObj: {}
    }
  },
  methods: {
    cancelOption () {
      this.$emit('cancelOption')
    },
    saveOption () {
      let param = {}
      if (this.modalType === 'add') {
        param = this.formItem
      } else if (this.modalType === 'edit') {
        param = this.formItem
      }
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          // console.log('提交表单', this.formItem)
          this.btnLoading = true
          saveRevise(param).then(ret => {
            let data = ret.data
            if (data.errcode === 0) {
              this.btnLoading = false
              this.success()
              this.$emit('saveOption')
            } else {
              this.btnLoading = false
              this.error(data)
            }
          })
        } else {
          this.$Message.error({
            content: '操作失败,请核对添加信息后重试'
          })
        }
      })
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
  },
  watch: {
    dataObj (val) {
      this.formItem = val
    }
  },
  computed: {}
}
</script>

<style scoped>
</style>
